<template>
    <div style="height: 90vh">

      <div v-if="this.$isweb" >
              <div class="contarin">
                <img style="width:400px;" src="@/assets/images/default.png" />
                <div style="line-height: 50px;margin-top: 40px;">
                  <div style=" font-size: 24px;font-weight: 600;">请前往软件端使用该功能</div>
                  <div style="color: #5f6666;">当前页面无法使用该功能</div>
                </div>
              </div>
        </div>

      <div v-else>
      <el-container  style="padding: 10px 10px;" >
        <el-aside v-loading="loading"  style="width: 225px;height: 83vh;border-radius: 5px;background: #f5f5f5;line-height: 16px;" >

            <div style="width: 171px;position: relative"  >
              <div style="height: 80px">
                <el-input
                  size="small" placeholder="请输入关键词搜索"
                  suffix-icon="el-icon-search"
                  v-model="queryParams.nickname"
                  clearable @keyup.enter.native="handleQuery"
                  @clear="handleclear">
                </el-input>
                <!--                搜索按钮-->
                <div  style="display: flex;margin-top: 10px;">
                  <el-button
                    size="mini"
                    type="primary"
                    v-hasPermi="['media:mediaAccount:add']"
                    style="height: 35px"
                    @click="loginVisible = true">
                    登录账号
                  </el-button>


                  <el-popover
                    placement="right"
                    width="260"
                    trigger="click">

                    <div style="display: flex;flex-direction: column;margin-left: 10px">
                      <span style="font-size: 16px;color: #777777;margin-bottom: 20px"><b>条件查询</b></span>

                      <div style="width: 100%;">
                        <el-select v-model="queryParams.platformCode" placeholder="请选择平台">
                          <el-option
                            v-for="item in platformList"
                            :key="item.platformCode"
                            :label="item.platformName"
                            :value="item.platformCode">
                          </el-option>
                        </el-select>
                      </div>

                      <div style="width: 100%;margin-top: 15px">
                        <el-select v-model="queryParams.loginStatus" placeholder="请选择登录状态">
                          <el-option :key="0" label="未登录" :value="0"/>
                          <el-option  :key="1" label="已登录" :value="1"/>
                        </el-select>
                      </div>

                      <div style="width: 97%;margin-top: 15px">
                        <el-input placeholder="请输入账号昵称" v-model="queryParams.nickname">
                        </el-input>
                      </div>

                      <div style="width: 97%;margin-top: 15px">
                        <el-input placeholder="请输入分组名称" v-model="queryParams.groupName">
                        </el-input>
                      </div>

                      <div style="margin-top: 30px;margin-left: 95px;">
                        <el-button size="mini" type="primary" @click="getList">
                          查询
                        </el-button>
<!--                        <el-button size="mini" type="primary" @click="deleteVideo">-->
<!--                          删除视频-->
<!--                        </el-button>-->
                        <el-button size="mini" type="primary" @click="handleclear">
                          重置
                        </el-button>
                      </div>
                    </div>
                    <el-button slot="reference" :type="(queryParams.loginStatus !== undefined || queryParams.nickname || queryParams.platformCode || queryParams.groupName) ? 'warning' : 'primary'"
                               size="small" style="height: 35px;right: 0px;position: absolute" >条件查询</el-button>

                  </el-popover>
                </div>
              </div>


<!--                 账号列表-->
              <div >
              <div v-if="accountList.length > 0"  v-for="(item,index) in accountList" :key="index" >
                <div :class="checkIncludes(item) ? 'checkedTab' : 'accountSty'" @scroll="loadMoreData" @click="addTab(item)">
                  <div style="position: relative;">
                    <img style="width: 35px;height: 35px;border-radius: 50px;margin:5px;" :src="item.headImgUrl">
                    <img style="width: 20px;height: 20px;border-radius: 50px;position:absolute;bottom: 3px;left: 25px" :src="require('@/assets/media/' + item.platformCode + '.png' )">
                  </div>
                  <div style="display: flex;flex-direction: column;">
                   <div style="font-size: 14px;margin-top: 5px;margin-left: 5px">
                     {{item.nickname && item.nickname.length > 5 ? item.nickname.substr(0,5) + '...' : item.nickname }}
                   </div>
                    <div style="font-size: 11px;margin-top: 5px;margin-left: 5px">
                      {{ getPlatformName(item.platformCode) }}
                    </div>
                  </div>
                  <div v-if="item.loginStatus === 1" style="position: absolute;right: 10px;margin-top: 10px;font-size: 12px;color: #38e560">
                    在线
                  </div>
                  <div v-else style="position: absolute;right: 10px;margin-top: 10px;font-size: 12px;color: #e72d2d">
                    离线
                  </div>
                  <div style="position: absolute;font-size: 10px;right: 10px;top: 30px;color: #8a8a8a" >
                    <span  v-if="item.acctType === 1">管理员</span>
                    <span type="success" v-if="item.acctType === 2">运营者</span>
                  </div>
                </div>
              </div>

                <div v-if="accountList.length === 0" style="margin-top: 25vh;text-align: center;color: #737373">
                  暂无自媒体账号
                </div>
              </div>

            </div>
<!--            <div style="bottom: 0px;position: absolute;left: 10px">-->
<!--              <el-button type="primary" @click="updateLogin" plain style="width: 225px;height: 40px">一键更新账号登录状态</el-button>-->
<!--            </div>-->
          </el-aside>
        <div style="margin-top: 80vh;text-align: center">
          <pagination
            small
            :page-size=5
            :total="total"
            layout="prev, pager, next"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>


<!--          主页面  -->
          <el-main  style="width: 90vw;height: 85vh;">
              <div v-if="editableTabs.length < 1" style="text-align: center">
                <el-empty style="margin-top: 15%"
                  :image="require('../../../assets/images/default.png')"
                  description="请点击左边选择帐号登录"></el-empty>
              </div>
            <el-tabs v-else v-model="editableTabsValue" style="width: calc(100vw - 500px);" type="card"  closable @tab-remove="removeTab">
              <el-tab-pane
                v-for="(item, index) in editableTabs"
                :key="item.name"
                :label="item.nickname"
                :name="item.name"
              >
                <span slot="label" style="vertical-align: top;border: 5px"  >
                      <img style="margin-top: 5px;width: 25px;height: 25px;margin-left: -11px;" :src="item.headImgUrl" />
                      <span class="text-overflow"
                            style="vertical-align: top !important;
                            margin-left: 3px;
                            display: inline-block;
                            width: 144px !important;
                            font-size: 12px;
                            height: 25px;
                            ">
                          {{ item.platformName }} - {{ item.nickname  }}
                      </span>
                  </span>
                <div class="nav">
                  <i class="el-icon-back icon" @click="handleClickLeft"></i>
                  <i class="el-icon-right icon" @click="handleClickRight"></i>
                  <i class="el-icon-refresh-right icon" @click="handleClickReload"></i>
                  <div class="link">{{ item.url }}</div>
<!--                  <el-link type="primary" class="rightbt">清空缓存</el-link>-->
                  <div class="rightbt" style="margin-top: 3px;cursor: pointer;color: #52b2ee" @click="copyLink(item.url)">复制链接</div>
                </div>
                <MediaIfame ref="webviewBrowser"
                    :url="item.url"
                     @getList="getList"
                    :platformCode="platformCode"
                    :partition="partition + item.name">
                </MediaIfame>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </div>

      <MediaLogin :loginVisibleParent.sync="loginVisible"  @loadData="getList"  :platformList.sync = "platformList"></MediaLogin>

    </div>
</template>

<script>
import { getLoginList,delAccount } from "@/api/media/mediaAccount";
import { listPlatform } from "@/api/media/platform";
import {Message} from "element-ui";

export default {
    name: "ManageAccount",
    data() {
        return {
          editableTabs:[],
          tabValue:undefined,
          editableTabsValue: '2',
          activebgList: [],
          tabList:[],
          loginVisible: false, //登录页开关
          url: "",
          partition: "persist:",
          platformCode:'',
          checkedAccount:[],
          platformList:[],
          addAccountVisible:false,
          platform:[],
          loading: false,
          listGroupList: [],
          // 帐号相关
          accountList: [],
          total: 0,
          mediaList:[],
          hasMoreData: true,
          isLoading: false,
          queryParams: {
              pageNum: 1,
              pageSize: 20,
              name: undefined,
              avatar: undefined,
              loginStatus: undefined,
              loginFailureReason: undefined,
              platformId: undefined,
              groupId: undefined,
              status: undefined,
              orderNum: undefined
          },
          activebg:0,
        }
    },
    created() {
        this.getList();
        this.getListPlatform();
    },
    methods: {


      loadMoreData(){
        console.log("加载数据！")
      },
      /**
       * 检查是否包含参数
       */
      checkIncludes(item){
        for(let i = 0; i < this.editableTabs.length;i++){
          if(this.editableTabs[i].name === item.id){
            return true
          }
        }
        return false
      },

      copyLink(data){
        let url = data;
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        document.execCommand("Copy");
        Message.success("复制成功！")
        oInput.remove()
      },

      /**
       * 添加一个tab页
       * @param item
       */
      addTab(item) {
        if (!this.activebgList.includes(item.id)) {
          this.activebgList.push(item.id)
          let url = this.getPlatformUrl(item.platformCode);
          this.platformCode = item.platformCode
          this.url = url
          let newTabName = item.id;
          this.editableTabs.push({
            nickname: item.nickname,
            name: newTabName,
            platformName: this.getPlatformName(item.platformCode),
            headImgUrl: item.headImgUrl,
            url: url,
          });

          this.editableTabsValue = item.id;
          console.log(item)
          this.$nextTick(async () => {
            await this.$refs.webviewBrowser[this.getTabindex()].handleClickSetCookies(item);
          })
        } else {
          this.editableTabsValue = item.id
        }
      },


      /**
       * 删除一个tab页
       * @param targetName
       */
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        this.activebgList = this.activebgList.filter(item => item !== targetName);
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      },





      /**
       * 根据获取对应平台的编码名称
       */
      getPlatformName(code){
        let name;
        this.platformList.forEach((item,index)=>{
          if(item.platformCode === code){
            name = item.platformName;
          }
        })
        return name;
      },

      /**
       * 根据获取对应平台的登录页
       */
      getPlatformUrl(code){
        let url;
        this.platformList.forEach((item,index)=>{
          if(item.platformCode === code){
            url = item.url;
          }
        })
        return url;
      },

      /**
       * 获取账号列表
       */
      getList() {
        this.loading = true;
        getLoginList(this.queryParams).then(response => {
          this.accountList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },

      /**
       * 获取平台列表
       */
      getListPlatform(){
        listPlatform({status : 1}).then(res=>{
          console.log(res)
          if(res.code === 200){
            this.platformList = res.rows
          }else{
            Message.error("平台列表查询失败！");
          }
        })
      },



      /**
       * 关闭模态弹框
       * @param done
       */
        handleClose(done) {
        this.loginVisible = false
        done();
        },



      //获取分组
      // getGrouplist() {
      //         listGroup().then(res => {
      //             let group = res.rows.map(item => {
      //             return { label: item.name, value: item.id }
      //             })
      //             this.listGroupList = [{ label: "未分组", value: 0 }, ...group]
      //         })
      //         },



    /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },


      /**
       * 删除视频接口
       */
      deleteVideo(){
        let args = {
          exportId:'export/UzFfAgtgekIEAQAAAAAAuCkJm06K5gAAAAstQy6ubaLX4KHWvLEZgBPExoMUIAUJIJiDzNPgMJqTDYGQK0-R0JwoZfV7clmH',
          _log_finder_id:'v2_060000231003b20faec8c5ea891ac2dcce03ee32b07720dd335cbf0a9761c907c8a245d7d2a4@finder',
          cookies:'sessionid=BgAAGpmEM7kD6ak4%2BUp%2FPDSVyuM2WPgB%2BWlcq2%2FFKx6Dxz%2FKx%2FL7r5uuqVahXMiWZgiZ2br0gcslIZXWxrwRydKvcl9ZCaw%3D;'
        }
       let res =  this.serviceInvoke("controller.media.deleteVideo",args);
        console.log(res)
      },


      /**
       * 清空搜索框内容
       */
      handleclear(){
        this.activebg='0'
            this.queryParams={
                pageNum: 1,
                pageSize: 50,
                name: undefined,
                avatar: undefined,
                loginStatus: undefined,
                loginFailureReason: undefined,
                platformId: undefined,
                groupId: undefined,
                status: undefined,
                orderNum: undefined
                },
            this.getList();
        },

      /**
       * 分页查询
       * @param val
       */
        handleSizeChange(val) {
            this.queryParams.pageSize = val
            this.getList()
        },
      /**
       * 分页查询
       * @param val
       */
        handleCurrentChange(val) {
            this.queryParams.pageNum = val;
            this.getList()
        },

      /**
       * 点击后退
       */
      handleClickLeft() {
            this.$nextTick(() => {
                this.$refs.webviewBrowser[this.getTabindex()].handleClickLeft()
            })
        },
      /**
       * 前进
       */

      handleClickRight() {
            this.$nextTick(() => {
                this.$refs.webviewBrowser[this.getTabindex()].handleClickRight()
            })

        },

      /**
       * 刷新
       */
      handleClickReload() {
            // console.log(this.$refs.webviewBrowser[1].handleClickReload());
            this.$nextTick(() => {
                this.$refs.webviewBrowser[this.getTabindex()].handleClickReload()
            })
        Message.success("刷新成功！")
        },

      /**
       * 获取tab下标
       * @returns {*}
       */
        getTabindex() {
            for (let index = 0; index < this.editableTabs.length; index++) {
                if (this.editableTabs[index].name == this.editableTabsValue) {
                    return index
                }
            }
        },

      /** 删除按钮操作 */
      handleDelete(row) {
          const ids = row.id
          this.$modal.confirm('是否确认删除帐号"' + row.name + '"的数据项？').then(() => {
              this.loading = true;
              return delAccount(ids);
          }).then(() => {
              this.loading = false;
              this.getList();
              this.$modal.msgSuccess("删除成功");
          }).catch(() => {
          }).finally(() => {
              this.loading = false;
          });
      },


    },
}
</script>
<style scoped  lang="scss">
::-webkit-scrollbar {
    width: 4px;
    height: 10px;
    border-radius: 4px;
    background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    border-radius: 10px;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.44, rgb(238, 130, 218)),color-stop(0.72, rgb(130, 192, 234)),color-stop(0.86, rgb(229, 146, 39)));
    transition: 0.3s ease-in-out;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
.accountSty{
  display: flex;
  position: relative;
  background: #f6f6f6;
  border-radius: 5px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}

.checkedTab{
  display: flex;
  position: relative;
  background: #dadaf5;
  border-radius: 5px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
}




.contarin{
  display: flex;
  justify-content: center;
  align-content: center;
  margin-top: 10%;
}

.dxAccountSty{
  display: flex;
  position: relative;
  background: #f6f6f6;
  border-radius: 5px;
  height: 50px;
  margin-top: 10px;
  cursor: pointer;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1)
}

.accountSty:hover{
  background: #dadaf5;
}
.dxAccountSty:hover{
  background: #dadaf5;
}

.nav {
  padding: 5px 0;
  display: flex;

  .icon {
    cursor: pointer;
    font-size: 20px;
    margin: 0 6px;
    color: #868686;
    font-weight: 400;

    &:hover {
      background-color: #f0f2fb;
      border-radius: 3px;
    }
  }

  .link {
    flex: 1;
    background-color: #fbfafd;
    font-size: 14px;
    color: #909090;
    padding: 3px 15px;
  }

  .rightbt {
    margin: 0 6px;
    font-size: 12px;
    font-weight: 400;
  }
}


</style>
